<template>
    <div class="myloginwrap">
        <div class="top">
            <div class="iconfont icon-cha1 top_back" @click="$router.push({name:'myclicklogin'})"></div>
        </div>
        <!---->
        <div class="body ">
            <div class="body_c ">
                <!---->
                <div class="body_c_login ">
                    <div class="body_c_login_txt ">
                        <div class="body_c_login_txt_nopwd " @click="nopwd">免注册登录</div>
                        <div style="width: 1px;height: 22px;background-color: #c0c0c0"></div>
                        <div class="body_c_login_txt_pwd " @click="pwd">密码登录</div>
                        <span class="bot_line"></span>
                    </div>

                </div>
                <!---->
                <div class="body_c_inputbox ">
                    <!--输入验证码-->
                    <div class="body_c_inputbox_nopwd">
                        <div class="body_c_inputbox_nopwd_tel ">
                            <span class="iconfont icon-shouji "></span>
                            <input type="text" placeholder="请输入手机号" >
                            <i class="iconfont icon-cha"></i>
                        </div>
                        <div class="body_c_inputbox_nopwd_code ">
                            <span class="iconfont icon-xinxiduanxinxiaoxitixingyoujiansixinyouxiang "></span>
                            <input type="text" placeholder="请输入验证码" >
                            <div class="">获取验证码</div>
                        </div>
                    </div>
                    <!--输入密码-->
                    <div class="body_c_inputbox_pwd"  style="display: none">
                        <div class="body_c_inputbox_pwd_tel ">
                            <span class="iconfont icon-shouji "></span>
                            <input type="text" placeholder="请输入手机号" >

                        </div>
                        <div class="body_c_inputbox_pwd_code ">
                            <span class="iconfont icon-suo "></span>
                            <input type="password" placeholder="请输入密码" class="pwd" >
                            <i class="iconfont icon-bukejian invisible" @click="invisible"></i>
                            <i class="iconfont icon-mimakejian visible" @click="visible" style="display: none;font-size: 15px"></i>
                        </div>
                    </div>
                </div>
                <!---->
                <div class="forgetpwd " >忘记密码</div>
                <!---->
                <div class="loginbot ">立即登录</div>
                <!---->
                <div class="third ">
                    <div class="third_line" style="left: 0"></div>
                    <div class="third_txt">第三方账号登录</div>
                    <div class="third_line" style="right: 0"></div>
                </div>
                <div class="iconfont icon-weibo third_icon"></div>
                <!---->
                <span class="agreement ">登录即代表您已同意<span class="agreement_user">《用户注册协议》</span>
            </span>


            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "mylogin",
        methods:{
            pwd:function () {
                //验证码 点击变密码
                let pwd=document.querySelector(".body_c_login_txt_pwd");
                pwd.style.color='#f2493d';
                document.querySelector(".body_c_login_txt_nopwd").style.color='#b0b0b0';
                document.querySelector(".bot_line").style.left='83%';
                document.querySelector(".body_c_inputbox_pwd").style.display='block';//显示密码输入
                document.querySelector(".body_c_inputbox_nopwd").style.display='none';//隐藏验证码输入
                document.querySelector(".forgetpwd").style.display='block';//显示忘记密码

            },
            nopwd:function () {
                //密码 点击变验证码
                let nopwd=document.querySelector(".body_c_login_txt_nopwd");
                nopwd.style.color='#f2493d';
                document.querySelector(".body_c_login_txt_pwd").style.color='#b0b0b0';
                document.querySelector(".bot_line").style.left='22%';
                document.querySelector(".body_c_inputbox_pwd").style.display='none';//隐藏密码输入
                document.querySelector(".body_c_inputbox_nopwd").style.display='block';//显示验证码输入
                document.querySelector(".forgetpwd").style.display='none';//显示忘记密码

            },
            invisible:function () {
                //不可见 点击变可见
                let invisible=document.querySelector(".invisible");
                invisible.style.display='none';
                document.querySelector(".visible").style.display='block';
                document.querySelector(".pwd").type='text';

            },
            visible:function () {
                //可见 点击变不可见
                let visible=document.querySelector(".visible");
                visible.style.display='none';
                document.querySelector(".invisible").style.display='block';
                document.querySelector(".pwd").type='password';

            },
        }
    }







</script>

<style scoped>

</style>